<html>
<head>
<title>T16 - Flower</title>
<style>
#outer {
height: 600px;
width: 500px;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: 45px;
}
.lt,
.lb {
height: 200px;
width: 500px;
}
.ltl {
height: 200px;
width: 250px;
float: left;
border-top-left-radius: 60%;
border-top-right-radius: 90%;
border-bottom-left-radius: 90%;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 26%, #FFCC70 100%);
}
.ltr {
height: 200px;
width: 250px;
float: left;
border-top-right-radius: 60%;
border-top-left-radius: 90%;
border-bottom-right-radius: 90%;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 26%, #FFCC70 100%);
}
.lbl {
height: 200px;
width: 248px;
float: left;
border-bottom-left-radius: 60%;
border-bottom-right-radius: 90%;
border-top-left-radius: 90%;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 26%, #FFCC70 100%);
}
.line {
height: 400px;
width: 4px;
float: left;
background-color: black;
}
.lbr {
height: 200px;
width: 248px;
float: right;
border-bottom-left-radius: 90%;
border-bottom-right-radius: 60%;
border-top-right-radius: 90%;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 26%, #FFCC70 100%);
}
</style>
</head>
<body>
<h1>Task - 16 | Flower</h1>
<div id="outer">
<div class="lt">
<div class="ltl"></div>
<div class="ltr"></div>
</div>
<div class="lb">
<div class="lbl"></div>
<div class="line"></div>
<div class="lbr"></div>
</div>
</div>
</div>
</body>
</html>